<template>
	<view class="container-with-tabbar">
		<navBar title="商城分类" />
		
		<view class="item-warp">
			
			<view class="item-side"> 
				<view v-for="(item, index) in navis" :key="index" class="item-cate" :class="param.current == index?'current':''">
					<text @click="handleCateClick(item, index)"> {{item.catname}} </text>
				</view>
			</view>
			
			<view class="item-body bg-white">
				<!--<view class="item-top-cate"> 
					<view v-for="(item, index) in 6" :key="index" class="item-sub-cate">
						
					</view>
				</view>
				-->
				<view class="item-list p-3">
					<uni-grid :column="3" :showBorder="false" :square="false">
						<uni-grid-item v-for="(item, index) in param.naviSubs" :key="index">
							<view class="item-box text-center mb-3">
								<view class="px-2"> 
									<image :src="item.image" mode="aspectFit" />
								</view>
								<view class="font-mini"> 
									<text>  {{item.catname}} </text> 
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			
		</view>
			
		<tabBar pagePath="/pages/category" />
	</view>	
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import navBar from '../components/navBar.vue';
	import tabBar from '../components/tabBar.vue';
	import { ajaxRequest, apiPath, checkLogin, goBack, handleNavigateTo } from "../lib/func.js";
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
	
	const param = reactive({
		current: 0,
		naviSubs: [],
		selected: 0,
	});

	const navis = [
		{catname: '日用品', catid: 1, children: [
			{catname: 'A子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '生鲜', catid: 1, children: [
			{catname: 'B子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '家电', catid: 1, children: [
			{catname: 'C子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '数码', catid: 1, children: [
			{catname: 'D子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '车品', catid: 1, children: [
			{catname: 'E子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '珠宝', catid: 1, children: [
			{catname: 'F子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '美妆', catid: 1, children: [
			{catname: 'G子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '服饰', catid: 1, children: [
			{catname: 'H子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '鞋帽包', catid: 1, children: [
			{catname: 'I子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
		{catname: '母婴', catid: 1, children: [
			{catname: 'J子分类1', catid: 11, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类2', catid: 12, image: '/static/ads/pic2@1x.png'},
			{catname: '子分类3', catid: 13, image: '/static/ads/pic2@1x.png'},
		]},
	];
	
	const handleCateClick = (item, index) => {
		//param.naviSubs = item;
		param.naviSubs = navis[index].children;
		param.current = index;
	}
	
	onLoad((option) => {
		param.naviSubs = navis[param.current].children;
		
		/*
		ajaxRequest({
			url: 'api/ads/info',
			data: {code: 'index'},
		}, (res) => {
			//console.log(res);
			adlist.value = res.data.data;
		});
		*/
	});
		
</script>

<style lang="scss" scoped>
	.banner-2x1 {
		image {
			width: 100%;
			height: 90px;
		}
	}
	.item-warp{
		display: flex;
		.item-side {
			width: 20%;
			padding: 2px 0;
			.item-cate {
				padding-left: 15px;
				padding-top: 5px;
				padding-bottom: 5px;
				line-height: 250%;
			}
			.current {
				background-color: #fff;
			}
		}
		.item-body{
			width: 80%;
			padding: 10px 0;
			.item-top-cate{
				
			}
			.item-list {
				.item-box {
					image {
						width: 70%;
						max-height: 40px;
					}
				}
			}
		}
	}
</style>
